<template>
	<view class="adressAdd">
		<uni-nav-bar :fixed="true" shadow left-icon="left" title="地址"  status-bar @clickLeft="back" :border="false"/>
		
		<view class="container">
				<uni-section title="地址信息" type="line">
					<view class="example">
						<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
							<uni-forms-item label="联系人" required name="consignee">
								<uni-easyinput v-model="valiFormData.consignee" placeholder="请输入姓名" />
							</uni-forms-item>

							<uni-forms-item label="手机号" required name="phone">
								<uni-easyinput v-model="valiFormData.phone" placeholder="请输入手机号" />
							</uni-forms-item>
							
							<uni-forms-item label="性别" required>
								<uni-data-checkbox v-model="valiFormData.sex" :localdata="sexs" />
							</uni-forms-item>
							
							<uni-forms-item label="标签" required>
								<uni-data-checkbox v-model="valiFormData.label" :localdata="labels" />
							</uni-forms-item>
							
							<uni-forms-item label="收获地址" required>
								<view class="" @click="show = true" style="height: 70rpx;display: flex;justify-content: space-between;">
									<view class="section">
									  <picker mode="region"  @change="bindPickerChange"  :value="region" :custom-item="customItem">
										<view class="picker">
										  {{valiFormData.provinceName}} / {{valiFormData.cityName}} / {{valiFormData.districtName}}
										</view>
									  </picker>
									</view>
									<uni-icons type="down" size="16"></uni-icons>
								</view>
								<uni-easyinput type="textarea" v-model="valiFormData.detail" placeholder="输入详细地址" />
							</uni-forms-item>
							
						</uni-forms>
						
						<button type="primary" @click="submit('valiForm')" style="background-color: #2979FF;" >保存地址</button>
						<button type="primary" @click="del()" style="background-color: #F56C6C; margin-top: 25rpx;" >删除地址</button>
					</view>
				</uni-section>

			</view>
	</view>
</template>

<script>
import {addAddress,queryAdressById,delAddress,updateAddress} from '@/api/adress.js'
export default {
		data() {
			return {
				region: ['全部', '全部', '全部'],
				customItem: '全部',
				show: false,
				method:'add',
				// 基础表单数据
				valiFormData: {
					id:'',
					desAdress:'',
					cityCode: "",
					cityName: "全部",
					consignee: "",
					detail: "",
					districtCode: "",
					districtName: "全部",
					isDefault: 0,
					label: "其他",
					phone: "",
					provinceCode: "",
					provinceName: "全部",
					sex: "先生",
				},
				// 单选数据源
				sexs: [{
					text: '先生',
					value: '先生'
				}, {
					text: '女士',
					value: '女士'
				}],
				labels:[
					{
						text:'公司',
						value:'公司'
					},
					{
						text:'家',
						value:'家'
					},
					{
						text:'学校',
						value:'学校'
					},
					{
						text:'其他',
						value:'其他'
					}
				],
				// 校验规则
				rules: {
					consignee: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}, {
							format: 'number',
							errorMessage: '年龄只能输入数字'
						}]
					}
				},

			}
		},
		computed: {
		},
		onLoad(options) {
			if(options.address!=null){
				this.valiFormData = JSON.parse(decodeURIComponent(options.address));
				this.method = 'update'
			}
				
		},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			// this.$refs.customForm.setRules(this.customRules)
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			bindPickerChange: function(e) {
				let adress = e.detail
				console.log(adress)
				console.log('picker发送选择改变，携带值为', adress.value)
				console.log("地区编号：",adress.postcode)
				this.region = adress.value
				this.valiFormData.provinceCode = e.detail.code[0]
				this.valiFormData.cityCode = e.detail.code[1]
				this.valiFormData.districtCode = e.detail.code[2]
				
				this.valiFormData.provinceName = e.detail.value[0]
				this.valiFormData.cityName = e.detail.value[1]
				this.valiFormData.districtName = e.detail.value[2]
			},
			 open() {
			        // console.log('open');
			      },
			  close() {
				this.show = false
				// console.log('close');
			  },
			onClickItem(e) {
				console.log(e);
				this.current = e.currentIndex
			},
			submit(ref) {
				console.log(this.valiFormData)
				this.$refs[ref].validate().then(res => {
					// console.log('success', res);
					if(this.method == 'add'){
						addAddress(this.valiFormData).then(res=>{
							uni.showToast({
								title: '添加成功'
							})
							uni.navigateBack({
								delta: 1
							})
							
						}).catch(err=>{
							uni.showToast({
								title: err
							})
						})
					}else{
						updateAddress(this.valiFormData).then(res=>{
							uni.showToast({
								title: '保存成功'
							})
							uni.navigateBack({
								delta: 1
							})
							
						}).catch(err=>{
							uni.showToast({
								title: err
							})
						})
					}


				}).catch(err => {
					console.log('err', err);
				})
			},
			del(){
				if(this.valiFormData.id == ''){
					uni.showToast({
						title:"该地址未添加，无法删除",
						icon:'none'
					})
				}else{
					
					delAddress(this.valiFormData.id).then(res=>{
						uni.showToast({
							title:"删除成功"
						})
						console.log(res)
						uni.navigateBack({
							delta: 1
						})
					}).catch(err=>{
						uni.showToast({
							title:err
						})
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>
